<template>
	<view class="fee_main">
		<view class="fee_main_bgBox">
			<view class="money_detail">
				<p>工单金额</p>
				<p class="mo_detail"><span style="font-size: 30rpx;">￥ </span>{{(detailObj.totalPrice||0).toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, '$1,')}}</p>
			</view>
			<view class="item_fee">
				<view class="item_content">
					<span class="lable_tip">工单单号</span><span class="content_name">{{detailObj.workNo}}</span>
				</view>
				<view class="item_content" v-if="!detailObj.status">
					<span class="lable_tip" >完成时间</span><span class="content_name">{{detailObj.endTime}}</span>
				</view>
				<view class="item_content" v-if="detailObj.status==1">
					<span class="lable_tip" >冻结时间</span><span class="content_name">{{detailObj.endTime}}</span>
				</view>
				<view class="item_content" v-if="detailObj.status==2">
					<span class="lable_tip" >解冻时间</span><span class="content_name">{{detailObj.endTime}}</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		ref, onMounted, reactive, watch, nextTick
	} from "vue";
	import apiAccount from '@/util/network_api/account.js'
	import _ from "lodash"
	import { onUnload, onShow, onLoad, onHide } from '@dcloudio/uni-app'

	const workId = ref(null)//工单Id
	const detailObj = ref({
		"workNo": "",
		"dateTime": null,
		"totalPrice": 0,
		"id": "",
		"endTime": "",
		"status": null
	})
	onLoad(async (e) => {
		workId.value = e.workId
		if(!e.workId)return
		getWithdrawOrderRecordDetail(workId.value)
	})
	const getWithdrawOrderRecordDetail = (id) => {
		uni.showLoading({
			title: '加载中',
		});
		apiAccount.getWithdrawOrderRecordDetail(id).then(res => {
			if (res.success) {
				detailObj.value = res.data.row
			}
			uni.hideLoading()
		})
	}
	onUnload(() => {
		uni.hideLoading()
	})
</script>

<style lang="scss" scoped>
	.fee_main {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		width: 100%;
		background: #fafafa;
		display: flex;
		flex-direction: column;
		overflow: auto;

		&_bgBox {
			margin: 24rpx;
			padding-bottom: 10vh;

			.money_detail {
				padding: 0 24rpx 24rpx;
				font-size: 28rpx;
				font-weight: bold;

				.mo_detail {
					font-size: 46rpx;
					font-weight: bold;
					margin-top: 24rpx;
					color: #007cff;
				}
			}

			.item_fee {
				background-color: #fff;
				padding: 24rpx;
				margin-bottom: 24rpx;

				&_tableHead {
					display: flex;
					align-items: center;
					margin-bottom: 24rpx;
					font-weight: bold;
					font-size: 28rpx;

					.down_up {
						width: 0;
						height: 0;
						border-right: 12rpx solid transparent;
						border-left: 12rpx solid transparent;
						border-top: 12rpx solid #000;
						margin-left: 4rpx;
					}

					.down_up_ {
						width: 0;
						height: 0;
						border-right: 12rpx solid transparent;
						border-left: 12rpx solid transparent;
						border-bottom: 12rpx solid #000;
						margin-left: 4rpx;
					}
				}

				.item_content {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
					font-size: 28rpx;
					padding: 24rpx 0;
					width: 100%;

					.lable_tip {
						color: #606266;
					}

					.content_name {
						flex: 1;
						text-align: right;
						margin-left: 32rpx;
					}
				}

				.item_content~.item_content {
					border-top: 2rpx solid #eee;
				}

				.order_sele_info {
					&_item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;

						.order_info_item {
							display: flex;
							flex-direction: column;
							justify-content: space-evenly;
							height: 160rpx;
						}
					}

					.order_sele_info_item~.order_sele_info_item {
						border-top: 2rpx solid #eee;
					}
				}
			}
		}
	}
</style>